import {Form, Input, Button, Icon, Select, Tag, Popover, Modal} from 'antd';
import style from 'styled-components';
import TaskDetailBasicInfomation from "./TaskDetail/TaskDetailBasicInfomation";


const RenderServiceTypeName = ({data}) => {
  if (!data) {
    return "";
  }
  if (data.indexOf(',') != -1) {
    let serviceTypeNameTmp = data.split(',');
    let renderServiceTypeName = serviceTypeNameTmp.map((item, index) => {
      return <Tag key={index}>{item}</Tag>
    })
    return renderServiceTypeName;

  } else if (data.indexOf(',') == -1 && data != '') {
    return <Tag>{data}</Tag>
  } else {
    return '';
  }

}
const RenderType = ({data}) => {
  switch (data) {
    case "紧急":
      return (<span className="type jj fixed">{data}</span>)
      break;
    case '临时':
      return (<span className="type ls fixed">{data}</span>)
      break;
    case '待发布':
      return (<span className="type dfb fixed">{data}</span>)
      break;
    default:
      return (<span className="type fixed">{data}</span>)
  }

}
//任务详情，任务 item
const TaskItem = ({dataSource, method, number, turnPage}) => {
  //所有的点击时间绑定在这里
  const clickHand = (dataSource, action, number) => {
    method(dataSource, action, number);
  }

  return (
    <div className="Task">
      <div className="cart-item" style={{position: "relative"}}>
        <div className="cart-item-top" onClick={turnPage.bind(this, dataSource)} style={{cursor: "pointer"}}>
          <div className="title">{dataSource.taskName} <RenderType data={dataSource.taskNature}/></div>
          <div className="tip">
            <RenderServiceTypeName data={dataSource.serviceType}/>
          </div>
          <div className="line"><span>类型：</span><p>{dataSource.taskType}</p></div>
          <div className="line"><span>地址：</span><p>{dataSource.taskAddress}</p></div>
          <div className="line"><span>内容：</span><Content>{dataSource.taskContent}</Content>
          </div>
        </div>
        {dataSource.isFormal == '0' ?
          <div className="cart-item-footer" style={{position: "absolute", bottom: "0", width: "100%"}}>
          <span style={{
            'color': '#108ee9',
            'display': 'inline-block',
            width: '50%',
            'textAlign': 'center',
            'cursor': 'pointer'
          }}
                onClick={clickHand.bind(this, dataSource, "goOn", number)}>继续创建</span>
            <span style={{
              'color': '#f5222e',
              'display': 'inline-block',
              width: '50%',
              'textAlign': 'center',
              'cursor': 'pointer'
            }}
                  onClick={clickHand.bind(this, dataSource, "delete", number)}>删除</span>
          </div>
          :
          <div className="cart-item-footer" style={{position: "absolute", bottom: "0", width: "100%"}}>
            <span><em className="dot"/>{dataSource.taskStatus}</span>
            <span>{dataSource.startDate && dataSource.startDate != '' && dataSource.startDate.slice(0, 10) + '~' + dataSource.endDate.slice(0, 10)}</span>
            <Popover placement="bottom"
                     trigger="click"
                     content={
                       <div className="popcontent">
                         {(dataSource.taskStatus == '进行中' || dataSource.taskStatus == '已完成') &&
                         <OptionItem onClick={clickHand.bind(this, dataSource, "close", number)}>关闭</OptionItem>}
                         {dataSource.taskStatus == '未开始' &&
                         <OptionItem onClick={clickHand.bind(this, dataSource, "cancel", number)}>取消</OptionItem>}
                       </div>
                     }
            >
              <Icon style={{fontSize: 20}} type="ellipsis"/>
            </Popover>
          </div>
        }
      </div>
    </div>
  );
};

export default TaskItem;


const Content = style.p`
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-all;
`;
const OptionItem = style.div`
  padding:3px 10px;
  cursor:pointer;
`;
